import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import styles from './style.module.scss';
import Carousel from '../../components/carousel';
import MusicScoreCard from '../../components/musicScoreCard';
import FooterItem from '../../components/footerItem';
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.min.css';
import { actionCreators , actionTypes } from './store';
class HomePage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            guitarActiveIndex: 1,
            uKuleleActiveIndex: 1,
            data:[1,2,3,4,5,6,7,8,9,10],
            bData: [{"color":"red","bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/WtmYp79QnH.png","businessType":"1","scoreDatum":{"id":4,"name":"流星的云","singer":"岸部真明","singerImg":"","hot":1256,"tags":null,"img":"http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/xL9RSbVlpp.jpg,http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/nNwL5d8Gfk.jpg,http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/1RYAUOVJJI.jpg","createTime":"2018-11-17T07:56:03.000Z","status":0,"type":null},"internetLink":"","deleteState":0},{"color":"blur","bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/tVsG7PNZUy.jpg","businessType":"0","scoreDatum":[],"internetLink":"","deleteState":0},{"bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/qEzPjIG8hN.jpg","businessType":"0","scoreDatum":[],"internetLink":"","deleteState":0},{"color":"#000","bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/JEpbfdre72.png","businessType":"0","scoreDatum":[],"internetLink":"","deleteState":0},{"color":"#ccc","bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/mjOUj33Un2.jpg","businessType":"0","scoreDatum":[],"internetLink":"","deleteState":0},{"color":"#f5f5f5","bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/4fSvvDhOHl.jpg","businessType":"1","scoreDatum":{"id":5,"name":"流行的云","singer":"岸部真明","singerImg":"http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Y9XYlYJVb2.jpg","hot":490,"tags":null,"img":"http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/EIiYJ8cRka.jpg,http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/m8K3KqnENZ.jpg,http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/1YKBTy6loM.jpg","createTime":"2018-11-17T07:56:43.000Z","status":1,"type":null},"internetLink":"","deleteState":0},{"color":"#c3c3c3","bannerUrl":"https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/banner/main/CCilwCJ99X.jpg","businessType":"0","scoreDatum":[],"internetLink":"","deleteState":0}]
        }
    }
    render() {
        const { mainBanner , hotGuitar , newGuitar , hotUKulele , newUKulele , history} = this.props;
        const { guitarActiveIndex, uKuleleActiveIndex} = this.state;
        return (
            <div className={styles['home-page']}>
                {/* 轮播图 */}
                <Carousel pagination={true} full={true} data={mainBanner}/>
                
                <div className={styles['music-score']}>
                    <div className={styles['hot-container']}>
                        <div className={styles['score-head']}>
                            <div className={styles['score-title']}>吉他谱</div>
                            <div className={styles['score-type']}>
                                <span className={this.state.guitarActiveIndex === 1 ? styles['score-type-active'] : ''} onClick={this.handleSwitchType.bind(this,1,1)}>热门</span>
                                <span className={this.state.guitarActiveIndex === 2 ? styles['score-type-active'] : ''} onClick={this.handleSwitchType.bind(this,1,2)}>最新</span>
                            </div>
                            <div className={styles['score-more']}>
                                <div className={styles['score-more-icon']}>
                                    <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/home_page_icon_more%402x.png" alt="更多"/>
                                </div>
                                <div className={styles['score-more-text']} onClick={()=>{
                                    history.push({
                                        pathname:'/guitarScore'
                                    })
                                }}>更多</div>
                            </div>
                        </div>
                        <div className={styles['music-score-card']}>
                            <div className="swiper-container-music-score" ref={guitarScoreSwiper => this.guitarScoreSwiper = guitarScoreSwiper}>
                                <div className="swiper-wrapper">
                                    {/* 热门 */}
                                    <div className={`swiper-slide swiper-no-swiping ${styles['hot-card']}`}>
                                        {
                                            hotGuitar.map( (item,index) => {
                                                return (
                                                    <div key={JSON.stringify(item)}>
                                                            <MusicScoreCard state={guitarActiveIndex} data={item}/>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                    {/* 最新 */}
                                    <div className={`swiper-slide swiper-no-swiping ${styles['hot-card']}`}>
                                        {
                                            newGuitar.map( (item,index) => {
                                                return (
                                                    <div key={JSON.stringify(item)}>
                                                            <MusicScoreCard state={guitarActiveIndex} data={item}/>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                
                <div className={styles['music-score']}>
                    <div className={styles['hot-container']}>
                        <div className={styles['score-head']}>
                            <div className={styles['score-title']}>尤克里里</div>
                            <div className={styles['score-type']}>
                                <span className={this.state.uKuleleActiveIndex === 1 ? styles['score-type-active'] : ''} onClick={this.handleSwitchType.bind(this,2,1)}>热门</span>
                                <span className={this.state.uKuleleActiveIndex === 2 ? styles['score-type-active'] : ''} onClick={this.handleSwitchType.bind(this,2,2)}>最新</span>
                            </div>
                            <div className={styles['score-more']}>
                                <div className={styles['score-more-icon']}>
                                    <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/home_page_icon_more%402x.png" alt="更多"/>
                                </div>
                                <div className={styles['score-more-text']} onClick={()=>{
                                    history.push({
                                        pathname:'/uKuleleScore'
                                    })
                                }}>更多</div>
                            </div>
                        </div>
                        <div className={styles['music-score-card']}>
                            <div className="swiper-container-music-score" ref={uKuleleScoreSwiper => this.uKuleleScoreSwiper = uKuleleScoreSwiper}>
                                <div className="swiper-wrapper">
                                    {/* 热门 */}
                                    <div className={`swiper-slide swiper-no-swiping ${styles['hot-card']}`}>
                                        {
                                            hotUKulele.map( (item,index) => {
                                                return (
                                                    <div key={JSON.stringify(item)}>
                                                            <MusicScoreCard state={uKuleleActiveIndex} data={item}/>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                    {/* 最新 */}
                                    <div className={`swiper-slide swiper-no-swiping ${styles['hot-card']}`}>
                                        {
                                            newUKulele.map( (item,index) => {
                                                return (
                                                    <div key={JSON.stringify(item)}>
                                                            <MusicScoreCard state={uKuleleActiveIndex} data={item}/>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                {/* 底部 */}
                <FooterItem/>
            </div>
        )
    }
    /**
     * 
     * @param {int} type   1 吉他谱 2 尤克里里
     * @param {int} state  1 热门 2 最新
     */
    handleSwitchType (type,state) {
        if (type === 1) {
            this.guitarSwiper.slideTo(state-1);
            this.setState({
                guitarActiveIndex: state
            });
        } else if (type === 2) {
            this.uKuleleSwiper.slideTo(state-1);
            this.setState({
                uKuleleActiveIndex: state
            });
        }
    }
    async componentDidMount (){
        const {acquireHomeMusicScore , acquireMainBanner} = this.props;
        this.guitarSwiper = new Swiper(this.guitarScoreSwiper, {
            width: 1150,
            // 切换速度
            speed:300
        });
        this.uKuleleSwiper = new Swiper(this.uKuleleScoreSwiper, {
            width: 1150,
            // 切换速度
            speed:300
        });
        acquireHomeMusicScore();
        acquireMainBanner();
        // const data = await obtainDengesCourse(LoginProto, 'Login.LoginReqMsg', 'Login.LoginResMsg', 'admin', '123456');
        // let data = await obtainMusicScoreData(MusicScore,'MusicScore.MusicScoreReqMsg','MusicScore.MusicScoreResMsg',1,1,1,10);
        // console.log(data,'.......data')
        // const data = await obtainMainBanner(BannerInfo, 'BannerInfo.MainBannerReqMsg', 'BannerInfo.MainBannerResMsg');
            // console.log(JSON.parse(data.data), '...data.....')
    }
}

const mapState = (state) => ({
    hotGuitar: state.homePage.hotGuitar || [],
    newGuitar: state.homePage.newGuitar || [],
    hotUKulele: state.homePage.hotUKulele || [],
    newUKulele: state.homePage.newUKulele || [],
    mainBanner: state.homePage.mainBanner || [],
    
});

const mapDispatch = (dispatch) => ({
    // 获取首页曲谱库数据
    acquireHomeMusicScore () {
        dispatch(actionCreators.acquireHomeMusicScore(actionTypes.Obtain_Home_Music_Score_Data))
    },
    // 获取bannner数据
    acquireMainBanner () {
        dispatch(actionCreators.acquireMainBanner(actionTypes.Obtain_Main_Banner))
    }
});

export default connect(mapState, mapDispatch)(withRouter(HomePage));